@import './variables.scss';

.padding-10 {
  padding: 10px;
}

$red-color: #f87171;
$green-color: #4ade80;
.text {
  font-size: 14px;
}

// 使用变量
.text-primary {
  color: $primary-color;
}

// 嵌套选择器
.list {
  @extend .padding-10;
  border: $border-width solid $red-color;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 5px 10px;
    background-color: #3498db;
    // 状态选择器
    &.active {
      background-color: #0983d5;
    }
    .text {
      color: $white-color;
    }
  }
}

// 使用混合器
@mixin border-radius($radius) {
  border-radius: $radius;
}
.border-radius-4 {
  @include border-radius(4px);
}
.border-radius-10 {
  @include border-radius(10px);
}

// 使用 extends
.message {
  @extend .padding-10;
  @extend .border-radius-4;
  border: $border-width solid #ccc;
  font-weight: 600;
}
.success-message {
  @extend .message;
  border-color: $green-color;
  color: $green-color;
}
.error-message {
  @extend .message;
  border-color: $red-color;
  color: $red-color;
}

// 条件语句
$debug-mode: true;

@if $debug-mode {
  // 调试样式
  .debug {
    @extend .padding-10;
    @extend .border-radius-4;
    border: $border-width solid $red-color;
  }
} @else {
  // 生产样式
  .debug {
    display: none;
  }
}

// 循环
@for $i from 1 through 5 {
  .item-#{$i} {
    @extend .border-radius-4;
    width: 60px * $i;
    height: 30px;
    padding-left: 5px;
    background-color: $primary-color;
    .text {
      line-height: 30px;
      color: $white-color;
    }
  }
}
